<template>
	<view>
		<view class="register-form">
			<u--form labelPosition="left" :model="swiper" :rules="rules" ref="uForm" :errorType="errorType"
				labelAlign="right">
				<u-form-item prop="title" borderBottom labelWidth="80">
					<u--input v-model="swiper.title" border="none" clearable placeholder="请输入标题"
						prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="url" borderBottom labelWidth="80">
					<u--input v-model="swiper.url" border="none" clearable placeholder="请输入网址"
						prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="imgUrl" borderBottom labelWidth="80">
					<u--input v-model="swiper.imgUrl" border="none" clearable placeholder="请输入图片地址"
						prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399" @focus="selectImage"
						 ></u--input>
				</u-form-item>
				
			</u--form>
		</view>
		<view class="register-submit">
			<view class="submit-button">
				<u-button type="success" text="保存" @click="addSwiper" ></u-button>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper: {
					url: '',
					imgUrl: '',
					title: '',
				},
				rules: {
					'title': {
						type: 'string',
						required: true,
						message: '请填写标题',
						trigger: ['blur', 'change']
					},
					'imgUrl': {
						type: 'string',
						required: true,
						message: '填写图片地址',
						trigger: ['blur', 'change']
					},
					
				},
				errorType: 'border-bottom',
			}
		},
		methods: {
			addSwiper(){
				var _this = this
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					uni.request({
						url: 'http://127.0.0.1:8080/swiper/addSwiper',
						method: 'POST',
						data: _this.swiper,
						header: {
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							console.log(res);
							uni.$u.toast('增加轮播图成功')
							uni.$emit('addSwiper',{})
							uni.navigateBack({
								delta:1
							})
						},
						fail: (err) => {
							console.log('err', err)
							.$u.toast('注册失败')
						}
					});
					
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			selectImage(){
				var _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://127.0.0.1:8080/upload/uploadSwiper', 
							filePath: tempFilePaths[0],
							name: 'uploadFile',
							header: {
								'token': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								var obj = JSON.parse(uploadFileRes.data)
								_this.swiper.imgUrl = obj.data
								console.log(_this.swiper.imgUrl);
								
							}
						});
					}
				});
			}
		}
	}
</script>

<style>

</style>
